<template>
	<view class="uni_box home">
		<navbar title='纠错' :yin="true">
		</navbar>
		<view class="content">
			<view class="jiuone">
				<text class="jiutit">错误类型（必填）</text>
				<view class="jiunav">
					<view class="jiuitem" :class="leiinfo==item?'jactive':''" v-for="(item,index) in leilist" :key="index" @click="leiClick(item)">{{item}}</view>
				</view>
			</view>

			<view class="tifour">
				<u-input v-model="content" type="textarea" :border="false" placeholder="请填写具体内容帮助我们了解您的意见和建议"/>
			</view>
			<text class="ganxie">非常感谢您提出的错误和建议，我们将尽快解决</text>

			<view class="jiaojuean" @click="jiaobtn">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:28,
				value:'',
				tid:'',
				leilist:[],
				leiinfo:'',
				content:''
			}
		},
		onLoad(option) {
			this.tid = option.tid
			this.getlei()
		},
		onShow() {
		},
		methods: {
			async getlei(){
				let res = await this.$u.api.getTopicErrorType({
				});
				this.leilist = res
				this.leiinfo = res[0]
			},
			async jiaobtn(){
				// this.navrouter("/pages_subject/twoPage/TiPage/TiBaogao");
				if(!this.content){
					this.$u.toast("请输入内容");
					return false;
				}
				let res = await this.$u.api.addTopicError({
					tid:this.tid,
					type:this.leiinfo,
					content:this.content
				});
				this.$u.toast("提交成功");
			},
			leiClick(item){
				this.leiinfo = item
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding: 40rpx 0rpx;
		.jiuone{
			padding: 0 30rpx;
			.jiutit{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #010101;
				display: block;
				margin-bottom: 40rpx;
			}
			.jiunav{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.jiuitem{
					padding: 18rpx 40rpx;
					background: #EEEEEE;
					border-radius: 50rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
				}
				.jactive{
					background: linear-gradient(-90deg, #FA4E4E, #FD894F);
					color: #fff;
				}
			}
		}
		.tifour{
			padding: 20rpx;
			border-radius: 10rpx;
			background: #F7F8FA;
			height: 270rpx;
			margin: 0 30rpx;
		}
		.ganxie{
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: block;
			margin: 40rpx 30rpx;
		}
		.kaone{
			height: 96rpx;
			background-color: #eee;
			width: 100%;
			position: relative;
			padding: 0 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.kaitem{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-right: 50rpx;
				.yuans{
					width: 28rpx;
					height: 28rpx;
					margin-right: 15rpx;
				}
				text{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}

			}
		}
		.katwo{
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.kkatwoitem{
				width: 25%;
				margin-bottom: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.ktitem{
					width: 75rpx;
					height: 75rpx;
					background: #EEEEEE;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}
				
			}
			.kactive{
				.ktitem{
					background: #FD864F;
					color: #fff;
				}
				
			}
		}
		.jiaojuean{
			position: fixed;
			width: 100%;
			height: 85rpx;
			bottom: 0;
			background: linear-gradient(-90deg, #FA4E4E, #FD894F);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
		}
		// padding-bottom: 150rpx;
	}
</style>
